<!--
 @description 近30天待配车
 @fileName ThirtyDayWaitCareChart.vue
 @author zengqiongying
 @created 2021/05/21 16:26:05
-->
<template>
  <div>
    <div :id="chartId" ref="myEchart" class="echart_container" />
  </div>
</template>

<script>
import ChartLineMixin from '@/mixins/ChartLine'
import { parseTime } from '@/utils'
import { getCareQuantityCurrentMonth } from '@/apis/logistics'
export default {
  name: 'MonthWaitCareChart',
  mixins: [ChartLineMixin],
  data() {
    return {
      legendData: ['待配车'], // 图列数据
      chartColors: ['#3D98F1']
    }
  },
  created() {
    const xAxis = this.echartOption.xAxis
    xAxis.axisLabel.showMinLabel = true
    xAxis.axisLabel.showMaxLabel = true
    xAxis.axisLabel.interval = 1
    xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
    xAxis.axisLabel.fontSize = 10 // 字体大小
    this.$set(this.echartOption, 'xAxis', xAxis)
    this.setOption()
  },
  methods: {
    async getChartData() {
      const xAxisData = []
      const dayData = []
      /*  for (let i = 1; i <= 31; i++) {
        xAxisData.push(`05-${i < 10 ? '0' + i : i}`)
        dayData.push(this.getRandom(i, 500))
        monthData.push(this.getRandom(i + 500, 2000))
      } */
      await getCareQuantityCurrentMonth().then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            xAxisData.push(parseTime(v.date, '{m}.{d}'))
            dayData.push(Number(v.waitCareQuantity || 0))
          })
        }
      })

      this.chart.chartData = {
        xAxisData,
        seriesData: [dayData]
      }
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    setOption() {
      const series = [
        {
          name: '待配车',
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          symbolSize: 6,
          lineStyle: {
            color: '#3D98F1' // 蓝色
            // width: 3
          },
          tooltip: {
            textStyle: {
              color: '#3D98F1'
            }
          },
          areaStyle: { // 区域填充样式
            color: { // 填充的颜色 // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#CFE9FF' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          data: []
        }
      ]
      const tooltip = this.echartOption.tooltip
      tooltip.formatter = (params) => {
        let tipMsg = `时间: ${params[0].name}<br>`
        const color = ['color-blue']
        for (const i in params) {
          const item = params[i]
          tipMsg += `${item.seriesName}: <span class='${color[i]}'>${Number(item.data).toFixed(2)}</span> <br>`
        }
        return `<div class="echart-tooltip-content">${tipMsg}</div>`
      }
      this.$set(this.echartOption, 'tooltip', tooltip)
      this.$set(this.echartOption, 'series', series)
      const xAxis = this.echartOption.xAxis
      xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
      this.$set(this.echartOption, 'xAxis', xAxis)
    }
  }
}

</script>
<style lang='less' scoped>
  .echart_container{
    height:260px
  }
</style>
